import { FC, useState, useEffect, useRef } from 'react';
import { Divider, Space, Table, Button, message, Spin, Pagination } from 'antd';
import { Link } from 'react-router-dom';
import { useCurrentSize, usePageInfo } from '@src/utils/useIndex';
import { ProductConfigurationSearchForm } from './productConfigurationSearchForm';
import { confProductInfoQueryPageAPI } from '@src/apis/configManagement';
export const ProductConfiguration: FC = () => {
  const { pageInfo, setPageInfo } = useCurrentSize();
  const [pageListData, setPageListData] = useState<any>({});
  const [colums] = useState<any>([
    {
      title: '业务单号?',
      dataIndex: 'productItemType',
      key: 'productItemType',
      width: 100,
    },
    {
      title: '业务类型名称',
      dataIndex: 'productItemName',
      key: 'productItemName',
      width: 100,
    },
    {
      title: '渠道代码',
      dataIndex: 'channelCode',
      key: 'channelCode',
      width: 100,
    },
    {
      title: '出单子账号',
      dataIndex: 'makeCode',
      key: 'makeCode',
      width: 100,
    },
    {
      title: '任务状态？',
      dataIndex: 'planCount',
      key: 'planCount',
      width: 100,
    },
    {
      title: '操作',
      key: 'Actions',
      width: 100,
      fixed: 'right',
      render: (text: any, record: any) => (
        <Link
          to={`/planDetail?productItemType=${encodeURIComponent(
            record.productItemType
          )}&type=prodConfig`}
        >
          详情
        </Link>
      ),
    },
  ]);
  const [tableLoading, setTableLoading] = useState<boolean>(false);
  const ajaxParams: any = useRef({});
  const searchBtnF = (formValue: any) => {
    console.log('点击了搜索', formValue);
    ajaxParams.current = formValue;
    getPageList(1, ajaxParams.current.size || pageInfo.size);
  };
  const getPageList = (current?: any, size?: any) => {
    let canshu: any = {
      ...ajaxParams.current,
    };
    canshu.current = current || ajaxParams.current.current || pageInfo.current;
    canshu.size = size || ajaxParams.current.size || pageInfo.size;
    setTableLoading(true);
    confProductInfoQueryPageAPI(canshu)
      .then((result: any) => {
        console.log(result);
        if (
          /*如果后台返回值没有数据 并且并非是在第一页*/
          result.data?.model?.length === 0 &&
          result.data?.current !== 1
        ) {
          getPageList(1, canshu.size);
          return;
        }
        setPageListData(result.data);
        setPageInfo({
          current: result.data.current,
          size: result.data.size,
        });
      })
      .catch((err: any) => {
        console.log(err);
      })
      .finally(() => {
        setTableLoading(false);
      });
  };

  const paginationChange = (pageNo: number, pageSize: any) => {
    console.log('pageNo=' + pageNo, 'pageSize=' + pageSize);
    getPageList(pageNo, pageSize);
  };

  const showTotal = () => {
    return `${pageListData?.total || 0}条记录`;
  };
  return (
    <div className="pageBox">
      <Spin spinning={tableLoading} delay={100}>
        <ProductConfigurationSearchForm searchBtnF={searchBtnF} />
        <div className="anTableBox margT10">
          <Table
            size={'small'}
            scroll={{ x: '100%' }}
            dataSource={pageListData?.model || []}
            columns={colums}
            rowKey={(record) => record.channelEndorOrder || Math.random()}
            pagination={false}
          />
          <Pagination
            hideOnSinglePage={true}
            style={{ textAlign: 'right', margin: '10px 0 0 0' }}
            size="small"
            current={pageInfo.current}
            pageSize={pageInfo.size}
            total={pageListData?.total || 0}
            showTotal={showTotal}
            onChange={paginationChange}
            showSizeChanger
            showQuickJumper
          />
        </div>
      </Spin>
    </div>
  );
};
